<template>
  <div class="personal-container">
    <div class="personal-main-panel">
      <div class="personal-tab-bar">
        <div v-for="(k, v) in dims.MODULE_FUNCTIONS" :key="v" class="personal-tab-item"
          :class="{ is_active: active_ === v }" @click="activeLabel(v)">
          <svg-icon :icon-class="getSvgIcon(k)" />
          <span>{{ getFuncLabel(k) }}</span>
        </div>
      </div>
      <div class="personal-content-area">
        <component :is="currView" ref="my-os-view" />
      </div>
    </div>
    <div class="personal-ads-container">
      <view-ads spaceCode="ADS_3" />
    </div>
  </div>
</template>

<script>
import viewAds from '@/components/ads';

// 使用动态导入优化组件加载
const views = {
  viewUser: () => import('@/views/personal/viewUser'),
  viewPackage: () => import('@/views/personal/viewPackage'),
  viewCollections: () => import('@/views/personal/viewCollections'),
  viewSettled: () => import('@/views/personal/viewSettled'),
  viewSet: () => import('@/views/personal/viewSet'),
  viewFeedback: () => import('@/views/personal/viewFeedback'),
  viewComment: () => import('@/views/personal/viewComment'),
  viewOrder: () => import('@/views/personal/viewOrder'),
  viewMessage: () => import('@/views/personal/viewMsg')
};

export default {
  name: 'PersonalCenter',

  components: {
    viewAds,
  },

  data() {
    return {
      dims: sa.$sys.getCurd() || {},
      active_: null,
      currView: null,
      isLoading: false
    };
  },

  created() {
    const kv = Object.entries(this.dims.MODULE_FUNCTIONS)[0];
    this.activeLabel(kv[0]);
  },

  methods: {
    /**
     * 切换标签
     * @param {string} index - 当前激活的标签索引
     */
    activeLabel(index) {
      this.active_ = index;
      this.getView(this.dims.MODULE_FUNCTIONS[index]);
    },

    /**P
     * 获取当前视图组件
     * @param {string} text - 包含视图名称的文本
     */
    async getView(text) {
      const results = this.extractAllFromBrackets(text);
      if (!results) return;
      const viewKey = results[1];
      if (!viewKey || !views[viewKey]) return;
      
      try {
        this.isLoading = true;
        const component = await views[viewKey]();
        this.currView = component.default;
      } catch (error) {
        console.error('Failed to load view:', error);
      } finally {
        this.isLoading = false;
      }
    },

    /**
     * 从文本中提取方括号内的内容 eg: 我的信息[info_card_2][viewUser]
     * @param {string} text - 输入文本
     * @param {RegExp} pattern - 正则表达式模式
     * @returns {string|null} 提取的内容
     */
    extractAllFromBrackets(text, pattern = /\[([^\]]+)\]/g) {
      const matches = [];
      let match;
      while ((match = pattern.exec(text)) !== null) {
        matches.push(match[1]);
      }
      return matches;
    },
    /**
     * 获取svg图标名称
     * @param {string} text - 包含图标名称的文本
     * @returns {string} 图标名称
     */
    getSvgIcon(text) {
      const results = this.extractAllFromBrackets(text);
      return results[0];
    },

    /**
     * 获取功能标签文本
     * @param {string} text - 原始文本
     * @returns {string} 功能标签
     */
    getFuncLabel(text) {
      return text.split('[')[0];
    }
  }
};
</script>

<style lang="scss" scoped>
@import '@/styles/mixin.scss';

.personal-container {
  @include flex-column;
  justify-content: space-between;
  padding: 16px;
  height: 100%;
  width: 100%;
}

.personal-ads-container {
  width: 100%;
  max-height: 180px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.personal-main-panel {
  width: 100%;
  max-height: calc(100% - 180px);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  padding: 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-bottom: 16px;
}

.personal-tab-bar {
  @include flex-start;
  height: 48px;
  margin-bottom: 16px;
  padding: 0 8px;
  gap: 8px
}

.personal-tab-item {
  @include tab-item-base;

  &:hover {
    @include tab-item-hover;
  }

  .svg-icon {
    font-size: 20px;
    margin-bottom: 4px;
  }

  span {
    font-size: 12px;
    color: #495057;
  }
}

.personal-content-area {
  flex: 1;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
  overflow: hidden;
}

@keyframes borderAnimation {
  0% {
    background: linear-gradient(45deg, #409eff, #67c23a);
  }

  50% {
    background: linear-gradient(45deg, #67c23a, #e6a23c);
  }

  100% {
    background: linear-gradient(45deg, #e6a23c, #409eff);
  }
}

.is_active {
  @include tab-item-active;
}

@media (max-width: 768px) {
  .personal-container {
    padding: 8px;
  }

  .personal-tab-item {
    width: 15%;
    padding: 4px;

    span {
      font-size: 10px;
    }
  }

  .personal-content-area {
    padding: 8px;
  }
}
</style>
